<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 	 		 Click on a date 		 	 		This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button. 		When you click a date, the calendar calls a Javascript function that, in this case, displays the date above the calendar.          		Certain days, which have been specified as special days, are displayed differently. 		In this demonstration, the following dates were specified as special: 		 		 		 			 January 1  			 May 1  			 May 5  			 July 4  			 July 14  			 November 29  			 December 25  		 		 ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Flat Calendar, Different Look for Special Days</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/green.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Flat Calendar, Different Look for Special Days</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>green theme</b>.</li>
				
	<div style="float: right; margin-left: 1em; margin-bottom: 1em;" id="calendar-container">
		<div style="text-align:center; font-weight:bold" id="preview"> Click on a date</div>
		<br/>
	</div>

		<li>This is a flat in-the-page calendar. It is displayed when the page loads rather than when the user clicks a button.</li>
		<li>When you click a date, the calendar calls a Javascript function that, in this case, displays the date above the calendar.
        
		<li>Certain days, which have been specified as <strong>special</strong> days, are displayed differently.
		In this demonstration, the following dates were specified as special:

		<br/>
		<br/>
		<ul>
			<li> January 1 </li>
			<li> May 1 </li>
			<li> May 5 </li>
			<li> July 4 </li>
			<li> July 14 </li>
			<li> November 29 </li>
			<li> December 25 </li>
		</ul>
		</li>

			</ul>
		</div>


<script type="text/javascript">
	<!--  to hide script contents from old browsers

	//months are 0 based which is a little confusing
	var SPECIAL_DAYS = [
	[0, 1], //january first
	[4, 1], //May 1
	[4, 5], //May 5
	[6, 4], //July 4
	[6, 14], //July 14
	[10, 29], //November 29
	[11, 25] //December 25
	];

	function dateIsSpecial(year, month, day) {
		for (ii = 0; ii < SPECIAL_DAYS.length; ii++) {
			if (((SPECIAL_DAYS[ii] [0]) == month) &&
			(((SPECIAL_DAYS[ii] [1]) == day))) {
				return true;
			}
		}
		return false;
	};

	function dateChanged(calendar) {
		var preview = document.getElementById("preview");
		if (preview) {
			preview.innerHTML = Zapatec.Date.print(calendar.currentDate, '%a, %b %d, %Y');
		}
	};

// end hiding contents from old browsers  -->
</script>

		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		flat         : "calendar-container", // ID of the parent element
		flatCallback : dateChanged,          // our callback function
		dateStatusFunc : function(date, y, m, d) {
			if (dateIsSpecial(y, m, d)) return "zpCalSpecialDay";
			else return false; // other dates are enabled
			// return true if you want to disable other dates
		},
		theme          : "green"

		});
		
		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
